<template>
  <div class="home">
    <button @click="handleClick">
      测试按钮
    </button>

    <button @click="handleClick2">
      测试按钮2
    </button>

    <h1>姓名: {{person.name}}</h1>
    <h1>年龄: {{person.age}}</h1>
  </div>
</template>


<script>
	import {defineComponent, getCurrentInstance, reactive} from 'vue';

	import axios from 'axios';


	export default defineComponent({
		setup(props, context) {
			const {proxy} = getCurrentInstance();

			let person = reactive({
				name: '',
				age: ''
			});

			function handleClick() {
				proxy.$http.get('/query/test').then((res) => {
					console.log(res);
					console.log(res.data);
					person.name = res.data['name'];
					person.age = res.data['age'];
				})
			}

			function handleClick2() {
        axios.get('/query/test').then((res) => {
					console.log(res);
					console.log(res.data);
					person.name = res.data.data['name'];
					person.age = res.data.data['age'];
				})
			}

			return {
				handleClick,
        handleClick2,
				person
			}
		}
	})
</script>
